<template>
  <div class="demo">
    <div>测试-----------------------------></div>
    <!-- 富文本框 -->
    <div>
      <el-upload
        class="avatar-uploader1"
        :action="serverUrl"
        name="file"
        :headers="header"
        :show-file-list="false"
        :on-success="uploadSuccess1"
        :on-error="uploadError"
        :before-upload="beforeUpload1"
      ></el-upload>
      <!--富文本编辑器组件-->
      <el-row v-loading="quillUpdateImg">
        <quill-editor
          v-model="detailContent"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange($event)"
        ></quill-editor>
      </el-row>
    </div>
    <div>测试1111111-----------------------------></div>
    <!-- 富文本框 -->
    <div>
      <el-upload
        class="avatar-uploader2"
        :action="serverUrl"
        name="file"
        :headers="header"
        :show-file-list="false"
        :on-success="uploadSuccess2"
        :on-error="uploadError"
        :before-upload="beforeUpload2"
      ></el-upload>
      <!--富文本编辑器组件-->
      <el-row v-loading="quillUpdateImg1">
        <quill-editor
          v-model="detailContent1"
          ref="myQuillEditor1"
          :options="editorOption1"
          @change="onEditorChange($event)"
        ></quill-editor>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {

    }
</script>

<style>

</style>


<script>
    // 工具栏配置
    const toolbarOptions = [
        ["bold", "italic", "underline", "strike"], // toggled buttons
        ["blockquote", "code-block"],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }], // superscript/subscript
        [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
        [{ direction: "rtl" }], // text direction

        [{ size: ["small", false, "large", "huge"] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ["link", "image", "video"],
        ["clean"] // remove formatting button
    ];
    const toolbarOptions1 = [
        ["bold", "italic", "underline", "strike"], // toggled buttons
        ["blockquote", "code-block"],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }], // superscript/subscript
        [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
        [{ direction: "rtl" }], // text direction

        [{ size: ["small", false, "large", "huge"] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ["link", "image", "video"],
        ["clean"] // remove formatting button
    ];
    import axios from "axios";
    export default {
        name: 'editor',
        data() {
            return {
                serverUrl: "http://localhost:8080/reception/upload", // 这里写你要上传的图片服务器地址
                header: { token: sessionStorage.token }, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
                detailContent: "", // 富文本内容
                detailContent1: "", // 富文本内容
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
                quillUpdateImg1: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
                editorOption: {
                    placeholder: "",
                    theme: "snow", // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions, // 工具栏
                            handlers: {
                                image: function(value) {
                                    if (value) {
                                        document.querySelector(".el-upload__input").click();
                                    } else {
                                        this.quill.format("image", false);
                                    }
                                }
                            }
                        }
                    }
                },
                editorOption1: {
                    placeholder: "",
                    theme: "snow", // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions1, // 工具栏
                            handlers: {
                                image: function(value) {
                                    if (value) {
                                        // alert("!")
                                        document.querySelector('.avatar-uploader2 .el-upload__input').click();
                                    } else {
                                        this.quill.format("image", false);
                                    }
                                }
                            }
                        }
                    }
                },
            }
        },
        methods: {
            onEditorChange() {
                console.info("内容改变...");
                //内容改变事件
            },
            // 富文本图片上传前
            beforeUpload1() {
                // 显示loading动画
                console.log("第一个上传的框")
                this.quillUpdateImg = true;
            },
            beforeUpload2() {
                // 显示loading动画
                console.log("第二个上传的框")
                this.quillUpdateImg1 = true;
            },

            uploadSuccess1(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill;
                // 第一个upload
                console.log(res.data)
                // 如果上传成功
                // if (res.code === "200" && res.info !== null) {
                // 获取光标所在位置
                //debugger
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                console.info("imageUrl:"+JSON.stringify(res.data));
                quill.insertEmbed(length, "image", res.data.cloudPath);
                // 调整光标到最后
                quill.setSelection(length + 1);
                console.info("content:"+JSON.stringify(quill.getContents()));
                // } else {
                //   this.$message.error("图片插入失败");
                // }
                // loading动画消失
                this.quillUpdateImg = false;
            },
            uploadSuccess2(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor1.quill;
                console.log(res.data)
                // 如果上传成功
                // if (res.code === "200" && res.info !== null) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, "image", res.data);
                // 调整光标到最后
                quill.setSelection(length + 1);
                // } else {
                //   this.$message.error("图片插入失败");
                // }
                // loading动画消失
                this.quillUpdateImg1 = false;
            },

            // 富文本图片上传失败
            uploadError() {
                // loading动画消失
                this.quillUpdateImg = false;
                this.$message.error("图片插入失败");
            }
        }
    }
</script>

